<template>
  <view class="flex_left_right header_container" :style="{ paddingTop: statusBarHeight + 'px' }">
    <view class="flex_left header_left">
      <view class="back-btn" @click="goBack" v-if="showBankVail">
        <uni-icons type="left" size="24" color="#333" />
      </view>
      <slot name="left"></slot>
    </view>
    <view class="flex_right header_title"><slot></slot></view>
    <view class="flex_left header_right"><slot name="right"></slot></view>
  </view>
</template>

<script setup lang="ts">
  import { redirectTo, switchTab } from '@/utils/navigateTo'
  import { getSystemInfo } from '@/utils/platform'
  import { computed } from 'vue'
  const props = defineProps({
    bankUrl: {
      type: String, // 明确类型为 string
      required: false,
      default: () => '',
    },
    showBankVail: {
      type: Boolean, // 明确类型为 string
      required: false,
      default: () => true,
    },
    type: {
      type: String, // 明确类型为 string
      required: false,
      default: () => 'page',
    },
  })
  defineOptions({ options: { styleIsolation: 'shared' } })
  const statusBarHeight = computed(() => getSystemInfo())
  const goBack = () => {
    if (props.bankUrl) {
      if (props.type == 'page') {
        redirectTo(props.bankUrl)
      } else if (props.type == 'tabBar') {
        switchTab(props.bankUrl)
      }
    } else {
      uni.navigateBack()
    }
  }
</script>

<style scoped lang="scss">
  .header_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0; /* 增加左右内边距，避免内容贴边 */
    height: 170rpx;
    background-color: #fff;
    border-bottom: 0.5px solid #dadbde; /* 合并边框样式 */
    box-sizing: border-box; /* 确保padding不会撑大容器 */
    width: 100%;
    z-index: 90; /* 确保在内容之上 */
    .header_title {
      position: absolute; // 新增
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
      font-weight: 600;
      text-align: center;
      pointer-events: none; // 防止遮挡右侧slot点击
    }
    .header_left {
      width: auto;
      display: flex;
      align-items: center;
      .back-btn {
        margin-right: 16rpx;
        margin-left: 16rpx;
        padding: 8rpx;
        border-radius: 50%;
        background: #f5f6fa;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .header_right {
      width: auto;
    }
  }
</style>
